{% extends 'userapp/master.html' %}
{% load static %}
{% block content %}

<div class="container my-5">
  <h2 class="text-primary">End Ride</h2>
  <div class="info">
    <p class="text-dark"><span class="bold text-primary">Bicycle Code Number:</span> {{ bike_rent.bike.code }}</p>
    <p class="text-dark"><span class="bold text-primary">Pick-Up Station:</span>
      {{ bike_rent.bike.station.name }}, {{ bike_rent.bike.station.location }}</p>
    <p class="text-dark"><span class="bold text-primary">Category:</span> {{ bike_rent.bike.category.name }}</p>
    <p class="text-dark"><span class="bold text-primary">Start Time:</span> {{ bike_rent.start_time|date:'H:i A' }}</p>
    <p class="text-dark"><span class="bold text-primary">End Time:</span> {{ bike_rent.end_time|date:'H:i A' }}</p>
    <p class="text-dark"><span class="bold text-primary">Total Ride Duration:</span> {{ duration_minutes }} minutes</p>
    <p class="text-dark"><span class="fw-bold text-primary">Total Cost:</span> ₹{{ cost }}</p>
  </div>

  <button type="button" id="pay-btn" style="background-color: orange; color: white; padding: 10px; border: none;">
    Make Payment
  </button>
</div>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  document.getElementById("pay-btn").addEventListener("click", function () {
    fetch("/create-razorpay-order/{{ bike_rent.id }}/")
      .then(response => response.json())
      .then(data => {
        const options = {
          key: data.razorpay_key,
          amount: data.amount * 100,
          currency: data.currency,
          name: "Bicyle Rental",
          description: "Ride Payment",
          order_id: data.order_id,
          handler: function (response) {
            fetch("/verify-razorpay-payment/{{ bike_rent.id }}/", {
              method: "POST",
              headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                  "X-CSRFToken": "{{ csrf_token }}"
              },
              body: new URLSearchParams({
                razorpay_payment_id: response.razorpay_payment_id,
                razorpay_order_id: response.razorpay_order_id,
                razorpay_signature: response.razorpay_signature,
                rental_request_id: data.rental_request_id
              })
            })
            .then(res => res.json())
            .then(result => {
              if (result.success) {
                Swal.fire("Payment Successful!", "Transaction ID: " + response.razorpay_payment_id, "success")
                .then(() => {
                  window.location.href = "/userlast/{{ bike_rent.id }}/" ;
                });
              } else {
                Swal.fire("Error", "Payment verification failed", "error");
              }
            });
          },
          theme: { color: "#28a745" }
        };
        const rzp = new Razorpay(options);
        rzp.open();
      })
      .catch(error => {
        console.error("Fetch error:", error);
        Swal.fire("Error", "Failed to initialize payment", "error");
      });
  });
</script>

{% endblock %}